<template>
  <div class="company-detail-page">
    <div class="detail-container">
      <!-- 加载状态 -->
      <el-skeleton v-if="loading" :rows="8" animated />
      <!-- 公司头部信息 -->
      <template v-else>
        <div class="company-header">
        <div class="header-left">
          <img :src="companyInfo.logo" class="company-logo-large" :alt="companyInfo.name" />
          <div class="company-basic-info">
            <h1 class="company-name-large">{{ companyInfo.name }}</h1>
            <div class="company-tags-info">
              <el-tag size="small" type="info">{{ companyInfo.status }}</el-tag>
              <el-tag size="small" type="info">{{ companyInfo.industry }}</el-tag>
              <el-tag size="small" type="info">{{ companyInfo.size }}</el-tag>
              <el-tag size="small" type="info">{{ companyInfo.location }}</el-tag>
            </div>
            <div class="company-intro">{{ companyInfo.introduction }}</div>
          </div>
        </div>
        <div class="header-right">
          <el-button type="primary" size="large">关注</el-button>
          <el-button size="large">分享</el-button>
        </div>
      </div>

      <!-- 公司详情标签页 -->
      <el-tabs v-model="activeTab" class="company-tabs">
        <el-tab-pane label="在招职位" name="jobs">
          <div class="jobs-section">
            <div class="jobs-header">
              <h2>在招职位 ({{ companyInfo.jobs.length }})</h2>
              <el-input
                v-model="jobSearchText"
                placeholder="搜索职位"
                size="small"
                style="width: 200px;"
                clearable
              >
                <template #prefix>
                  <i>🔍</i>
                </template>
              </el-input>
            </div>
            <div class="jobs-list">
              <div
                v-for="job in filteredJobs"
                :key="job.id"
                class="job-item"
                @click="goToJobDetail(job.id)"
              >
                <div class="job-item-header">
                  <div class="job-title">{{ job.title }}</div>
                  <div class="job-salary">{{ job.salary }}</div>
                </div>
                <div class="job-tags">
                  <span class="job-tag">{{ job.experience }}</span>
                  <span class="job-tag">{{ job.education }}</span>
                  <span v-for="skill in job.skills" :key="skill" class="job-tag skill">{{ skill }}</span>
                </div>
                <div class="job-footer">
                  <span>{{ job.publisher }}</span>
                  <span class="separator">·</span>
                  <span>{{ job.publishTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司介绍" name="intro">
          <div class="intro-section">
            <div class="intro-item">
              <h3>公司简介</h3>
              <p>{{ companyInfo.description }}</p>
            </div>
            <div class="intro-item">
              <h3>公司地址</h3>
              <p>{{ companyInfo.address }}</p>
            </div>
            <div class="intro-item">
              <h3>公司福利</h3>
              <div class="welfare-tags">
                <el-tag
                  v-for="welfare in companyInfo.welfare"
                  :key="welfare"
                  type="success"
                  size="small"
                  class="welfare-tag"
                >
                  {{ welfare }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司动态" name="news">
          <div class="news-section">
            <div
              v-for="news in companyInfo.news"
              :key="news.id"
              class="news-item"
            >
              <div class="news-date">{{ news.date }}</div>
              <div class="news-content">
                <h4>{{ news.title }}</h4>
                <p>{{ news.content }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import { fetchCompanyDetail } from '../../api/enterprise'

export default {
  name: 'CompanyDetailView',
  data() {
    return {
      activeTab: 'jobs',
      jobSearchText: '',
      loading: false,
      companyInfo: {
        id: '',
        name: '',
        logo: '',
        status: '',
        industry: '',
        size: '',
        location: '',
        introduction: '',
        description: '',
        address: '',
        welfare: [],
        jobs: [],
        news: [],
      },
      companiesData: {
        kuaishou: {
          id: 'kuaishou',
          name: '快手',
          logo: '/upload/img_4.png',
          status: '已上市',
          industry: '社交网络与媒体',
          size: '10000人以上',
          location: '北京',
          introduction: '快手是领先的内容社区和社交平台，致力于成为全球最痴迷于为客户创造价值的公司。',
          description: '快手是领先的内容社区和社交平台。快手的前身叫"GIF快手"，诞生于2011年3月，最初是一款用来制作、分享GIF图片的手机应用。2012年11月，快手从纯粹的工具应用转型为短视频社区，用于用户记录和分享生产、生活的平台。',
          address: '北京市海淀区上地西路6号快手总部',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '员工旅游', '餐补', '交通补助', '股票期权'],
          jobs: [
            {
              id: 1,
              title: '客户端开发工程师',
              salary: '21-30K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Android', 'iOS', '移动开发'],
              publisher: '张HR',
              publishTime: '2天前',
            },
            {
              id: 2,
              title: '前端开发工程师',
              salary: '18-30K·16薪',
              experience: '1-3年',
              education: '本科',
              skills: ['Vue', 'React', 'JavaScript'],
              publisher: '李HR',
              publishTime: '3天前',
            },
            {
              id: 3,
              title: '后端开发工程师',
              salary: '25-40K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring', '微服务'],
              publisher: '王HR',
              publishTime: '1天前',
            },
          ],
          news: [
            {
              id: 1,
              date: '2024-01-15',
              title: '快手发布2023年度报告',
              content: '快手发布2023年度报告，用户增长显著，平台生态持续优化。',
            },
            {
              id: 2,
              date: '2024-01-10',
              title: '快手新功能上线',
              content: '快手推出全新AI功能，提升用户体验。',
            },
          ],
        },
        baidu: {
          id: 'baidu',
          name: '百度',
          logo: '/upload/img.png',
          status: '已上市',
          industry: '互联网',
          size: '10000人以上',
          location: '北京',
          introduction: '百度是全球最大的中文搜索引擎、最大的中文网站。',
          description: '百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。',
          address: '北京市海淀区上地十街10号百度大厦',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权', '免费班车', '餐补'],
          jobs: [
            {
              id: 4,
              title: '基础架构部研发工程师',
              salary: '30-60K·16薪',
              experience: '5-10年',
              education: '本科',
              skills: ['分布式系统', '云计算', 'Go'],
              publisher: '赵HR',
              publishTime: '1天前',
            },
          ],
          news: [
            {
              id: 3,
              date: '2024-01-12',
              title: '百度AI技术突破',
              content: '百度在AI领域取得重大突破，技术实力再上新台阶。',
            },
          ],
        },
        xiaomi: {
          id: 'xiaomi',
          name: '小米',
          logo: '/upload/img_3.png',
          status: '已上市',
          industry: '互联网',
          size: '10000人以上',
          location: '北京',
          introduction: '小米是一家以手机、智能硬件和IoT平台为核心的互联网公司。',
          description: '小米公司成立于2010年4月，是一家专注于智能硬件和电子产品研发的移动互联网公司。',
          address: '北京市海淀区安宁庄东路小米科技园',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '员工旅游', '股票期权'],
          jobs: [
            {
              id: 5,
              title: '高级Java开发工程师',
              salary: '20-40K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring Boot', '微服务'],
              publisher: '孙HR',
              publishTime: '2天前',
            },
          ],
          news: [],
        },
        huawei: {
          id: 'huawei',
          name: '华为',
          logo: '/upload/img_2.png',
          status: '不需要融资',
          industry: '计算机软件',
          size: '10000人以上',
          location: '深圳',
          introduction: '华为是全球领先的信息与通信技术(ICT)解决方案供应商。',
          description: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司，于1987年正式注册成立。',
          address: '深圳市龙岗区坂田华为基地',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权', '员工宿舍'],
          jobs: [
            {
              id: 6,
              title: '软件开发(JS/java/pyt...)',
              salary: '25-45K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Python', 'JavaScript'],
              publisher: '周HR',
              publishTime: '3天前',
            },
          ],
          news: [],
        },
        alibaba: {
          id: 'alibaba',
          name: '阿里巴巴集团',
          logo: '/upload/img.png',
          status: '已上市',
          industry: '互联网',
          size: '10000人以上',
          location: '杭州',
          introduction: '阿里巴巴集团致力于让天下没有难做的生意。',
          description: '阿里巴巴集团成立于1999年，是一家以电商、云计算、数字媒体和娱乐为主营业务的综合性互联网公司。',
          address: '杭州市余杭区文一西路969号',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权', '免费班车'],
          jobs: [
            {
              id: 7,
              title: '高德JAVA高级工程师',
              salary: '25-50K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring', '高德地图'],
              publisher: '吴HR',
              publishTime: '1天前',
            },
          ],
          news: [],
        },
        jd: {
          id: 'jd',
          name: '京东集团',
          logo: '/upload/img_2.png',
          status: '已上市',
          industry: '电子商务',
          size: '10000人以上',
          location: '北京',
          introduction: '京东是中国领先的技术驱动型电商和零售基础设施服务商。',
          description: '京东集团是中国领先的技术驱动型电商和零售基础设施服务商。',
          address: '北京市亦庄经济技术开发区京东总部',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权'],
          jobs: [
            {
              id: 8,
              title: '后端开发工程师',
              salary: '30-60K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring', '分布式系统'],
              publisher: '郑HR',
              publishTime: '2天前',
            },
          ],
          news: [],
        },
        boss: {
          id: 'boss',
          name: 'BOSS直聘',
          logo: '/upload/img_1.png',
          status: '已上市',
          industry: '人力资源服务',
          size: '1000-9999人',
          location: '北京',
          introduction: 'BOSS直聘是在全球范围内首创互联网"直聘"模式的在线招聘产品。',
          description: 'BOSS直聘是在全球范围内首创互联网"直聘"模式的在线招聘产品，致力于为求职者提供高效、便捷的求职体验。',
          address: '北京市朝阳区望京SOHO',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权'],
          jobs: [
            {
              id: 9,
              title: 'Java高级开发工程师',
              salary: '20-40K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring Boot', '微服务'],
              publisher: '钱HR',
              publishTime: '1天前',
            },
          ],
          news: [],
        },
        goodfuture: {
          id: 'goodfuture',
          name: '好未来',
          logo: '/upload/img_3.png',
          status: '已上市',
          industry: '互联网',
          size: '10000人以上',
          location: '北京',
          introduction: '好未来是一个以智慧教育和开放平台为主体，以素质教育和课外辅导为载体。',
          description: '好未来是一个以智慧教育和开放平台为主体，以素质教育和课外辅导为载体，在全球范围内服务公办教育。',
          address: '北京市海淀区中关村大街',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假'],
          jobs: [
            {
              id: 10,
              title: 'Java架构师',
              salary: '20-40K',
              experience: '5-10年',
              education: '本科',
              skills: ['Java', '架构设计', '分布式系统'],
              publisher: '孙HR',
              publishTime: '3天前',
            },
          ],
          news: [],
        },
        didi: {
          id: 'didi',
          name: '滴滴出行',
          logo: '/upload/img_4.png',
          status: 'D轮及以上',
          industry: '互联网',
          size: '10000人以上',
          location: '北京',
          introduction: '滴滴出行是全球领先的一站式多元化出行平台。',
          description: '滴滴出行是全球领先的一站式多元化出行平台，在中国400余座城市为近4亿用户提供出租车、快车、专车等服务。',
          address: '北京市海淀区中关村软件园',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权'],
          jobs: [
            {
              id: 11,
              title: '高级java研发工程师',
              salary: '20-25K',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring', '微服务'],
              publisher: '李HR',
              publishTime: '2天前',
            },
          ],
          news: [],
        },
        weibo: {
          id: 'weibo',
          name: '微博',
          logo: '/upload/img.png',
          status: '已上市',
          industry: '互联网',
          size: '10000人以上',
          location: '北京',
          introduction: '微博是中国领先的社交媒体平台。',
          description: '微博是中国领先的社交媒体平台，为用户提供信息分享、传播及获取的平台。',
          address: '北京市海淀区中关村',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假'],
          jobs: [
            {
              id: 12,
              title: 'JAVA高级开发工程师',
              salary: '20-40K·16薪',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', 'Spring', '高并发'],
              publisher: '王HR',
              publishTime: '1天前',
            },
          ],
          news: [],
        },
        tuyou: {
          id: 'tuyou',
          name: '途游游戏',
          logo: '/upload/img_1.png',
          status: '不需要融资',
          industry: '游戏',
          size: '500-999人',
          location: '北京',
          introduction: '途游游戏是一家专注于移动游戏开发与发行的公司。',
          description: '途游游戏是一家专注于移动游戏开发与发行的公司，致力于为玩家提供优质的移动游戏体验。',
          address: '北京市朝阳区',
          welfare: ['五险一金', '年终奖', '带薪年假', '员工旅游'],
          jobs: [
            {
              id: 13,
              title: '游戏后端开发工程师',
              salary: '30-50K',
              experience: '3-5年',
              education: '本科',
              skills: ['Java', '游戏开发', '服务器开发'],
              publisher: '张HR',
              publishTime: '3天前',
            },
          ],
          news: [],
        },
        amap: {
          id: 'amap',
          name: '高德地图',
          logo: '/upload/img_2.png',
          status: '已上市',
          industry: '互联网',
          size: '1000-9999人',
          location: '北京',
          introduction: '高德地图是中国领先的数字地图内容、导航和位置服务解决方案提供商。',
          description: '高德地图是中国领先的数字地图内容、导航和位置服务解决方案提供商，为阿里巴巴集团全资子公司。',
          address: '北京市朝阳区望京',
          welfare: ['五险一金', '补充医疗保险', '年终奖', '带薪年假', '股票期权'],
          jobs: [
            {
              id: 14,
              title: '阿里-高德-Java开发',
              salary: '45-70K·16薪',
              experience: '5-10年',
              education: '本科',
              skills: ['Java', '高德地图', 'LBS'],
              publisher: '赵HR',
              publishTime: '1天前',
            },
          ],
          news: [],
        },
      },
    }
  },
  computed: {
    filteredJobs() {
      if (!this.jobSearchText) {
        return this.companyInfo.jobs
      }
      return this.companyInfo.jobs.filter(job =>
        job.title.toLowerCase().includes(this.jobSearchText.toLowerCase())
      )
    },
  },
  mounted() {
    this.loadCompanyInfo()
  },
  watch: {
    '$route.params.id'() {
      this.loadCompanyInfo()
    },
  },
  methods: {
    async loadCompanyInfo() {
      const companyId = this.$route.params.id
      this.loading = true
      
      try {
        // 优先从后端API获取公司详情
        const response = await fetchCompanyDetail(companyId)
        
        if (response.code === 200 && response.data) {
          // 格式化职位数据
          const jobs = response.data.jobs || []
          const formattedJobs = jobs.map(job => ({
            id: job.id,
            title: job.title,
            salary: job.salary,
            experience: job.experience || '不限',
            education: job.education || '不限',
            skills: job.skills ? job.skills.split(/[，,、]/).slice(0, 3) : [],
            publisher: job.publisher || 'HR',
            publishTime: job.publishTime || '未知'
          }))
          
          this.companyInfo = {
            id: response.data.id,
            name: response.data.name,
            logo: response.data.logo || '/upload/img.png',
            status: response.data.status || '未认证',
            industry: response.data.industry || '互联网',
            size: response.data.size || '未知',
            location: response.data.location || response.data.address || '未知',
            introduction: response.data.introduction || response.data.description || '',
            description: response.data.description || '',
            address: response.data.address || '',
            welfare: response.data.welfare || [],
            jobs: formattedJobs,
            news: response.data.news || [],
          }
        } else {
          // API失败，尝试使用本地数据
          this.loadFromLocalData(companyId)
        }
      } catch (error) {
        console.error('获取公司详情失败:', error)
        // API调用失败，尝试使用本地数据
        this.loadFromLocalData(companyId)
      } finally {
        this.loading = false
      }
    },
    loadFromLocalData(companyId) {
      // 兼容旧的硬编码数据（如果API失败）
      const company = this.companiesData[companyId]
      if (company) {
        this.companyInfo = { ...company }
      } else {
        // 默认显示第一个公司
        this.companyInfo = { ...this.companiesData.kuaishou }
        this.$message.warning('未找到公司信息，显示默认公司')
      }
    },
    goToJobDetail(jobId) {
      // 这里可以跳转到职位详情页
      this.$message.info(`跳转到职位详情页：${jobId}`)
    },
  },
}
</script>

<style scoped>
.company-detail-page {
  min-height: calc(100vh - 64px);
  background: #f5f5f5;
  padding: 24px 0;
}

.detail-container {
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
}

/* 公司头部 */
.company-header {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  display: flex;
  gap: 24px;
  flex: 1;
}

.company-logo-large {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #f0f0f0;
}

.company-basic-info {
  flex: 1;
}

.company-name-large {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px 0;
}

.company-tags-info {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.company-intro {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

.header-right {
  display: flex;
  gap: 12px;
}

/* 标签页 */
.company-tabs {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 职位列表 */
.jobs-section {
  padding-top: 20px;
}

.jobs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.jobs-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-item {
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.job-item:hover {
  border-color: #00c293;
  box-shadow: 0 2px 8px rgba(0, 194, 147, 0.1);
}

.job-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.job-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.job-salary {
  font-size: 18px;
  font-weight: 700;
  color: #ff4d4f;
}

.job-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.job-tag {
  padding: 4px 12px;
  background: #f5f5f5;
  color: #666;
  border-radius: 12px;
  font-size: 12px;
}

.job-tag.skill {
  background: #e6f7ff;
  color: #1890ff;
}

.job-footer {
  color: #999;
  font-size: 14px;
}

.separator {
  margin: 0 8px;
}

/* 公司介绍 */
.intro-section {
  padding-top: 20px;
}

.intro-item {
  margin-bottom: 32px;
}

.intro-item h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.intro-item p {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
}

.welfare-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.welfare-tag {
  margin: 0;
}

/* 公司动态 */
.news-section {
  padding-top: 20px;
}

.news-item {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
}

.news-date {
  min-width: 100px;
  color: #999;
  font-size: 14px;
}

.news-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.news-content p {
  color: #666;
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
}
</style>

